<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web App</title>
</head>

<body>
    <input type="text" id="messageInput" placeholder="Type a message">
    <button id="sendButton">Send</button>
    <div id="result"></div>

    <script>
        const currentUrl = window.location.href;
        console.log('Current URL:', currentUrl);
        const socket = new WebSocket('ws://localhost:65000');
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');
        const resultDiv = document.getElementById('result');

        //webSocket 打开事件
        socket.addEventListener('open', () => 
        {
            console.log('Connected to WebSocket server');

            resultDiv.textContent = 'Connected to WebSocket server';
        });

        //webSocket 接收消息事件
        socket.addEventListener('message', (event) => 
        {
            resultDiv.textContent = event.data;
        });

        //webSocket 关闭事件
        socket.addEventListener('close', () => 
        {
            console.log('Disconnected from WebSocket server');

            resultDiv.textContent = 'Disconnected to WebSocket server,restart the page';
        });

        sendButton.addEventListener('click', () =>
         {
            const message = messageInput.value;
            if (message)
             {
                socket.send(message);
            }
        });
    </script>
</body>

</html>